import React from 'react'
import { useDispatch } from 'react-redux'
// import {
//   minus,
//   add,
//   asyncAdd,
//   asyncGetChannels
// } from '../../store/actionCreator'

import { add, minus, asyncAdd } from '../../store/reducers/counterSlice'
import { asyncGetChannels } from '../../store/reducers/channelSlice'

export default function CompA () {
  const dispatch = useDispatch()

  return (
    // <div>
    //   CompA
    //   <p>
    //     <button
    //       onClick={() => {
    //         dispatch(minus(2))
    //       }}
    //     >
    //       -2
    //     </button>
    //     &nbsp;&nbsp;
    //     <button onClick={() => dispatch(add(4))}>+4</button>
    //   </p>
    //   <p>
    //     <button onClick={() => dispatch(asyncAdd(4))}>异步的+3</button>
    //   </p>
    //   <p>
    //     <button onClick={() => dispatch(asyncGetChannels())}>
    //       获取频道列表数据
    //     </button>
    //   </p>
    // </div>

    <div>
      CompA-Redux-toolkit
      <p>
        <button onClick={() => dispatch(minus(2))}>-2</button>
        &nbsp;&nbsp;
        <button onClick={() => dispatch(add(4))}>+4</button>
      </p>
      <p>
        <button onClick={() => dispatch(asyncAdd(3))}>异步的+3</button>
      </p>
      <p>
        <button onClick={() => dispatch(asyncGetChannels())}>
          获取频道列表数据
        </button>
      </p>
    </div>
  )
}
